<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex, nofollow">
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        svg:not(:root) {
            display: block;
        }

        .playable-code {
            background-color: #f4f7f8;
            border: none;
            border-left: 6px solid #558abb;
            border-width: medium medium medium 6px;
            color: #4d4e53;
            height: 100px;
            width: 90%;
            padding: 10px 10px 0;
        }

        .playable-canvas {
            border: 1px solid #4d4e53;
            border-radius: 2px;
        }

        .playable-buttons {
            text-align: right;
            width: 90%;
            padding: 5px 10px 5px 26px;
        }
    </style>

    <style>
        fieldset {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            gap: 1rem;
            width: fit-content;
        }

        @page toc {
            size: a4 portrait;
            @top-middle {
                content: "Table of contents";
            }
        }
        @page ch_ppa4 {
            size: 3.91in 2.876in;
/* 2 values: width then height,  1 value: height = width
size: portrait;
size: landscape;   10种尺寸预设
*/
        }
        @page foreword {
            size: a4 portrait;
            @top-middle {
                content: "Foreword";
            }
        }

        @page introduction {
            size: a4 portrait;
            @top-middle {
                content: "Introduction";
            }
        }

        @page conclusion {
            size: a4 portrait;
            @top-middle {
                content: "Conclusion";
            }
        }

        @page chapter {
            size: a4 landscape;
            @top-middle {
                content: "Chapter";
            }
        }

        @media print {
            fieldset {
                display: none;
            }
            section {
                font-size: 2rem;
                font-family: Roboto;
            }
            .chapter {
                border: tomato 2px solid;
            }
            [data-print="grouped"] > #toc,
            [data-print="paged"] > #toc {
                page: toc;
                font-family: Courier;
            }
            [data-print="grouped"] > #foreword,
            [data-print="paged"] > #foreword {
                page: foreword;
                font-family: Courier;
            }
            [data-print="grouped"] > #introduction,
            [data-print="paged"] > #introduction {
                page: introduction;
                font-family: Courier;
            }
            [data-print="grouped"] > #conclusion,
            [data-print="paged"] > #conclusion {
                page: conclusion;
                font-family: Courier;
            }
            [data-print="grouped"] > .chapter,
            [data-print="paged"] > .chapter {
                page: chapter;
            }
            [data-print="paged"] > .chapter {
                border: none;
                break-after: page;
            }
            .chapter > ul {
                columns: 2;
            }
        }

    </style>

    <title>page - named_page_example - code sample</title>

</head>
<body>

<!-- print options 文档看 https://developer.mozilla.org/en-US/docs/Web/CSS/page#named_page_example
   [data-print="paged"] > .chapter {   属性选择符号？
  -->

<fieldset id="printStyle">
    <legend>How would you like to print</legend>
    <label for="single"
    ><input type="radio" id="single" name="type" value="single" checked />No
        Pages</label
    >
    <label for="grouped"
    ><input type="radio" id="grouped" name="type" value="grouped" />Pages with
        Grouped Chapters</label
    >
    <label for="paged"
    ><input type="radio" id="paged" name="type" value="paged" />Chapters
        Paged</label
    >
    <button id="print">Print</button>
</fieldset>
<!-- Content to be printed -->
<article id="print-area" data-print="single">
    <section id="toc">
        <h2>Table of contents</h2>
        <ul>
            <li>Foreword</li>
            <li>Introduction</li>
            <li>Chapter One - named pages</li>
            <li>Chapter Two - page orientation</li>
            <li>Chapter Three - page margins</li>
            <li>Conclusion</li>
        </ul>
    </section>
    <section id="foreword">
        <h2>Foreword</h2>
        <p>
            This book is all about how the CSS <code>@page</code> at-rule can help
            with printing HTML books.
        </p>
    </section>
    <section id="introduction">
        <h2>Introduction</h2>
        <p>
            This book is a concept to show how an <em>HTML</em> document can easily be
            printed out in pages.
        </p>
    </section>
    <section id="chapter1" class="chapter">
        <h2>Named pages</h2>
        <p>Lorem ipsum</p>
    </section>
    <section id="chapter2" class="chapter">
        <h2>Page Orientation</h2>
        <p>Lorem ipsum</p>
    </section>
    <section id="chapter3" class="chapter">
        <h2>Page Margins</h2>
        <p>There are 16 page margins that can be set:</p>
        <ul>
            <li>@top-left-corner</li>
            <li>@top-left</li>
            <li>@top-middle</li>
            <li>@top-right</li>
            <li>@top-right-corner</li>
            <li>@left-top</li>
            <li>@left-middle</li>
            <li>@left-bottom</li>
            <li>@right-top</li>
            <li>@right-middle</li>
            <li>@right-bottom</li>
            <li>@bottom-left-corner</li>
            <li>@bottom-left</li>
            <li>@bottom-middle</li>
            <li>@bottom-right</li>
            <li>@bottom-right-corner</li>
        </ul>
        <p>They can be used to show what appears in these parts of the margin</p>
    </section>
    <section id="conclusion">
        <h2>Conclusion</h2>
        <p>Now go ahead and write books.</p>
    </section>
    <section id="chapter5" class="chapter">
        <h2>Page Margins33</h2>
        <p>There are 17 page margins that can be set:</p>
        <ul>
            <li>@top-left-corner</li>
            <li>@top-left</li>
            <li>@top-middle</li>
            <li>@top-right</li>
            <li>@top-right-corner</li>
            <li>@left-top</li>
            <li>@left-middle</li>
            <li>@left-bottom</li>
            <li>@right-top</li>
            <li>@right-middle</li>
            <li>@right-bottom</li>
            <li>@bottom-left-corner</li>
            <li>@bottom-left</li>
            <li>@bottom-middle</li>
            <li>@bottom-right</li>
            <li>@bottom-right-corner</li>
        </ul>
        <p>They can be used to show what appears in these parts of the margin</p>
    </section>
</article>



<script>
    const printArea = document.querySelector("#print-area");
    const printButton = document.querySelector("#print");
    const printOption = document.querySelector("#printStyle");
    printOption.addEventListener("change", (event) => {
        //对调paged single： ?? .dataset.print如何变身 data-print="single"属性值的？？
        if (event.target.value === "single") {
            printArea.dataset.print = "paged";
        } else if (event.target.value === "grouped") {
            printArea.dataset.print = "grouped";
        } else {
            printArea.dataset.print = "single";
        }
    });
    printButton.addEventListener("click", () => {
        window.print();
    });

</script>

</body>
</html>
